<template>
	<view>
		<!-- 轮播图 -->
			<swiper class="swiper"
				:indicator-dots="indicatorDots"
				:circular="circular"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
				@change="changeImg"
				:style="{height:height+'px'}"
				>
		  <swiper-item v-for="(item,index) in imgList":key="index" @click="onClick(index)">
		    <view class="swiper-item">
				<image :src="item.url" mode="aspectFill" class="img" :style="{height:height+'px'}" />
		    </view>
		  </swiper-item>
		</swiper>
		<!-- 轮播图页数 -->
		<view class="current" v-if="currentShow" :style="{top:height-35+'px'}">{{current}}/{{currentLength || ''}}</view>
	</view>
</template>

<script>
export default {
	name:'mySwiper',
	data(){
		return{
			//swiper轮播图
			indicatorDots: false, //是否显示面板指示点
			circular: false, //是否采用衔接滑动
			autoplay: true, //是否自动切换
			interval: 3000, //自动切换时间间隔
			duration: 1000, //滑动动画时长
			current: 1 //当前所在滑块
		}
	},
	computed:{
		currentLength(){
			return this.imgList.length
		}
	},
	props:{
		imgList:{
			type:Array,
			default(){
				return[]
			}
		},
		height:{
			type:Number,
			default:200
		},
		currentShow:{
			type:Boolean,
			default:true
		}
	},
	methods:{
		changeImg(event) {
		  this.current = event.detail.current + 1
		},
		onClick(index){
			console.log('click', index)
			this.$emit('click',index)
		}
	}
}
</script>

<style lang="less" scoped>
.swiper {
	  .img{
		  width:100%;
		  height:100%;
	  }
	}
	.current {
	  position: absolute;
	  right: 30upx;
	  top: 230rpx;
	  color: #fff;
	  z-index: 999;
	  background: rgba(0, 0, 0, 0.5);
	  width: 100upx;
	  height: 42upx;
	  line-height: 42upx;
	  text-align: center;
	  opacity: 0.9;
	  font-size: 24upx;
	}
</style>
